import React, {
    Fragment,
    PureComponent
} from 'react';

import {
    View,
    Image,
    StyleSheet
} from 'react-native';

import * as CONST from './../../const';

import {
    Press,
    Modal,
    FastImage,
} from './../../components';

interface Props {
    url:string,
    style?:any,
    isAvatar:boolean,
    onPress:Function,
    onSetAvatar: Function,
    onDelete: Function
}

interface State {
    show:boolean
}

import Menu from './menu';

import camera_icon from './../../images/home/me/camera.png';
import avatar_icon from './../../images/home/me/main_photo.png';

class Choose extends PureComponent <Props,State> {

    static defaultProps = {
        url:``,
        isAvatar:false,
        onPress:() => null,
        onSetAvatar:() => null,
        onDelete:() => null
    }

    state = {
        show:false
    }

    _onPress = () => {
        const {
            url,
            isAvatar,
            onPress,
        } = this.props;

        if(isAvatar) {
            return false
        }

        if(!!url) {
            return this.setState({
                show:true
            })
        }
        onPress()
    }

    _onClose = () => {
        this.setState({
            show:false
        })
    }

    _onDelete = () => {
        this._onClose();
        const {
            onDelete
        } = this.props;
        onDelete();
    }


    _onSetAvatar = () => {
        this._onClose()
        const {
            onSetAvatar
        } = this.props;
        onSetAvatar();
    }

    render() {
        const {
            url,
            style,
            isAvatar
        } = this.props;

        const {
            show
        } = this.state;

        const _styles = [
            styles.container,style
        ]

        if(isAvatar) {
            _styles.push(
                styles.redColor
            )
        }
        return (
            <Fragment>
                <Press
                    style={_styles}
                    onPress={this._onPress}
                >
                    {!!url ? (
                        <Fragment>
                            <FastImage
                                url={url}
                                style={styles.imageStyle}
                            />
                            {isAvatar && (
                                <Image
                                    source={avatar_icon}
                                    style={styles.isAvatar}
                                />
                            )}
                        </Fragment>
                    ):(
                        <View style={styles.defaultImage}>
                           <Image source={camera_icon}/>
                        </View>
                    )}
                </Press>
                <Modal
                    show={show}
                    direction="bottom"
                    onClose={this._onClose}
                >
                    <Menu
                        onDelete={this._onDelete}
                        onCancel={this._onClose}
                        onSetAvatar={this._onSetAvatar}
                    />
                </Modal>
            </Fragment>
        )
    }
}

export default Choose;

const styles = StyleSheet.create({
    container:{
        width:`100%`,
        height:`100%`,
        borderRadius:4,
        borderWidth: .6,
        overflow:`hidden`,
        backgroundColor:`#f9f9f9`,
        borderColor:CONST.color
    },
    line:{
        width:28,
        height:4,
        borderRadius:2,
        backgroundColor:`#565B70`
    },
    rotate:{
        transform:[{
            rotate:`90deg`
        }]
    },
    imageStyle:{
        flex:1
    },
    redColor:{
        borderColor:CONST.color
    },
    enter:{
        left:0,
        right:0,
        top:0,
        bottom:0,
        alignItems:`center`,
        position: 'absolute',
        justifyContent:`center`
    },
    defaultImage:{
        flex:1,
        alignItems:`center`,
        justifyContent:`center`
    },
    isAvatar:{
        right:4,
        top:4,
        borderRadius:24,
        position: 'absolute',
        backgroundColor:`#fff`
    }
}) as any;